<template>
  <view class="zph">
    <view class="tabs">
      <view
        :class="['tab-item u-text-center', curNow == index? 'active': '']"
        v-for="(item, index) in list"
        :key="index"
        @click="tabsChange(index)"
      >
        <text v-if="item.icon && curNow == index" class="icon icon-hot"></text>
        {{item.name}}
      </view>
    </view>
    <scroll-view class="zph-list" scroll-y enable-flex @scrolltolower="loadMore">
      <ZphItem class="list-item"  v-for="item in zphList" :key="item.id" :item="item"></ZphItem>
      <u-loadmore
        v-if="zphList.length || !loaded"
        class="list-more"
        :status="moreLoading"
        :load-text="loadText"
      />
      <Empty v-if="loaded && !zphList.length" :baseImg="emptyImg" text="招聘会正在筹备，敬请期待…" :fontWeight="400" class="empty" />
    </scroll-view>

  </view>
</template>

<script>
import ZphItem from '@/components/ZphItem.vue'
import Empty from '@/components/Empty.vue'

import { getZphList } from '@/api/modules/zph.js'

export default {
  components: {
    ZphItem,
    Empty,
  },
  data() {
    return {
      list: [
        {
          name: '火热进行',
          icon: 'icon icon-hot',
          type: 'now',
        },
        {
          name: '往期回顾',
          type: 'past',
      }],
      curNow: 0,
      zphList: [],
      pageParams: {
        pageNo: 0,
        pageSize: 20,
      },
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      finished: false,
      loading: false,
      timeType: 'now',
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    tabsChange(index) {
      this.curNow = index;
      this.timeType = this.list[index].type;
      this.reset();
    },
    reset() {
      this.pageParams.pageNo = 0;
      this.moreLoading = 'loadmore';
      this.loaded = false;
      this.zphList = [];
      this.getData();
    },
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;

      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        timeType: this.timeType,
      }
      this.moreLoading = 'loading';
      getZphList(params).then(res => {
        this.moreLoading = 'loadmore';
        this.loaded = true;
        if(res && res.code == 200) {
          let data = res.data.map(item => {
            item.startTime = item.startTime && item.startTime.replace(/\-/g, '.');
            item.endTime = item.endTime && item.endTime.replace(/\-/g, '.');
            if (item.timeForShow) {
              item.timeForShow = item.timeForShow.slice(0, 10) + ' - ' + item.timeForShow.slice(19, 29)
            }
            return item;
          });
          if(isMore) {
            this.zphList.push(...data)
          } else {
            this.zphList = data;
          }
          this.pageParams.pageNo++;
          if(this.pageParams.pageNo > res.pageparam.pages) {
            this.moreLoading = 'nomore';
          }
        } else {
          this.moreLoading = 'nomore';
          uni.showToast({
            title: res.status_desc,
            icon: 'none',
          });
        }
      }).catch(err => {
        this.moreLoading = 'nomore';
      })

    },
    loadMore() {
      this.getData(true);
    }
  }
}
</script>

<style lang="scss" scoped>
.zph {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;

  .tabs {
    display: flex;
    margin-top: 32rpx;
    padding: 0 16rpx;
    .tab-item {
      background-color: #FFF;
      width: 327rpx;
      height: 64rpx;
      margin: 0 16rpx;
      font-size: 28rpx;
      color: #666666;
      line-height: 64rpx;
      border-radius: 8rpx;
      &.active {
        color: #F75A3E;
      }
    }
  }

  .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
    margin-top: -6rpx;
  }
  .icon-hot {
    background-image: url($img-base + 'career/hot.png');
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    height: 1px;
    flex-grow: 1;
    // height: calc(100vh - 562rpx);
    padding: 32rpx 32rpx 0 32rpx;
    // .list-item:nth-child(2n+1) {
    //   margin-right: 26rpx;
    // }
  }
  .list-more {
    margin: 0 auto;
    width: 100%;
  }

  .empty {
    margin: 0 auto;
  }
}

</style>